<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="ext-4.0.7/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-4.0.7/ext-all-debug.js"></script>
<!--<script type="text/javascript" src="ext/ext3-base.js"></script>
<script type="text/javascript" src="ext/ext3-all-debug.js"></script>-->
<script type="text/javascript" src="../tracks/songs.json"></script>
<script type="text/javascript" src="../tracks/mp3s.json"></script>
<script type="text/javascript">

Ext.onReady(function()
{
   var store = Ext.create('Ext.data.ArrayStore', {
        storeId:'employeeStore',
        autoLoad: true,
        groupField: 'dates',
        fields:[
        "dates","artist","showtime","venue","city","cover","key","information"
        ,{name: 'track', type: 'string', convert:function(v,rec){return songs[rec.id];}}        
        ,{name: 'sample', type: 'string', convert:function(v,rec){return mp3s[rec.id];}}
//        ,{name: 'bio',    type: 'string', convert:function(v,rec){return bio[rec.id];}}
        ],
/*        
        data:[
            ["10/25/11","Adam Carroll,Brian Keane,Owen Temple","7:00pm","Gruene Hall, Gruene","New Braunfels","no cover","","Tuesday Night Song Swap w/ "],
            ["10/25/11","Alejandro Escovedo","10:00pm","Continental Club","Austin","$10 cover","",""],
            ["10/25/11","Alvin Crow","7:00pm","Jovita's","Austin","$?","",""],
            ["10/25/11","Ancient Wisdom","n/a","La Zona Rosa","Austin","$?","",""],
            ["10/25/11","Anika","n/a","Emo's","Austin","$?","inside",""],
            ["10/25/11","Austin Weekly Presents","7:00pm","Flipnotics Coffeespace Cafe","Austin","no cover","",""],
            ["10/25/11","Ben Beckendorf","5:00pm","Luckenbach Dancehall","Luckenbach","$?","","Picker Circle"]
        ]

*/
        proxy:{
            type: 'ajax',
            url: 'events.json',
            reader: 'array'
       }
  
    });
      var tp = new Ext.Template([
        '<div>',
            '<div>{artist}</div>',
            '<div>{showtime}</div>',
            
            
                '<div colspan=2><a href="{url}">{venue}</a></div>',
                '<div>{cover}</div>',
            
            
                '<div><img src="{picurl}"></img></div>',
                '<div>{bio}</div>',
                '<div>',
                    '<div>{star}</div>',
                    '<div>{genre}</div>',
                    '<div>{sample}</div>',
                '</div>',
            
        '</table>'
    ]);

    var tpl = new Ext.Template([
            '<div class="record">',
                '<div class="artist">{artist}</div>',
                '<div class="showtime">{showtime}</div>',
            
            
                '<div class="venue"><a href="{url}">{venue}</a></div>',
                '<div class="cover">{cover}</div>',
            
            
                '<div class="picurl"><img src="{picurl}"></img></div>',
                '<div class="bio">{bio}</div>',
                '<div>',
                    '<div class="star">{star}</div>',
                    '<div class="genre">{genre}</div>',
                    '<div class="sample">{sample}</div>',
                    '<div class="track">{track}</div>',
                '</div>',
            '</div>'
    ]);

    var grid = Ext.create('Ext.grid.Panel', {
        title: 'Column Template Demo',
        store: store,
        hideHeaders:  true,
        columns: [
            { text: 'Full Name',       xtype: 'templatecolumn', tpl: tpl, width: 750}
            //{ text: 'Full Name',       xtype: 'templatecolumn', tpl: '{firstname} {lastname}', flex:1 },
            //{ text: 'Deparment (Yrs)', xtype: 'templatecolumn', tpl: '{department} ({senority})' }
        ],
        height: 500,
        width: 800
    });


    var vwport = new Ext.Viewport({
        layout:  'border',
        items:  [
            {
                region:  'north',
                items:  [
                    {
                        xtype:  'form',
                        fieldDefaults1:  {
                            labelWidth:  50
                        },
                        items:  [
                            {
                                xtype:  'datefield',
                                fieldLabel:  'Select a Date',
                                name: 'date',
                                format: 'm/d/Y',
                                value:  new Date()
                            }
                        ]
                    }
                ],
                height:  50
            },
            {
                region:  'center',
                items:  [
                    grid
                ],
                html1:  'center'
            },
            {
                region:  'south',
                html:  'south',
                height:  100
            }
        ]
    });
    //"DATES","ARTIST","SHOWTIME","VENUE","CITY","COVER","KEY","Information"
})
</script>
</head>
<body>


</body>
</html>
